{% extends 'base.html.twig' %}
{% import 'Import/app_import.html.twig' as appImport %}

{% block head_title %}{{ 'theme_editor'|trans }}{% endblock %}

{% block heading_1 %}
    {{ appImport.heading({'level': 1, 'title': 'theme_editor'|trans}) }}
{% endblock %}

{% block main_content %}
    <div class="jumbotron {{ theme_jumbotron }} ">
        <p class="lead">{{ 'theme_editor_note'|trans|raw }}</p>
    </div>

    {% embed 'Embed/block_embed.html.twig' %}
        {% import 'Import/app_import.html.twig' as appImport %}
        {% block content %}
            {% embed 'Embed/buttons_embed.html.twig' %}
                {% block content %}
                    {% for theme, values in predefined %}
                        <a href="#" class="btn btn-primary btn-sm theme" data-values="{{ values|json_encode }}">{{ theme|capitalize }}</a>
                    {% endfor %}
                {% endblock %}
            {% endembed %}

            {{ appImport.form({'form': form}) }}
        {% endblock %}
    {% endembed %}
{% endblock %}

{% block scripts %}
    {{ parent() }}

    <script type="text/javascript">
        function changeTheme(target) {
            var theme = JSON.parse(target.getAttribute('data-values'));
            for (const property in theme) {
                var data = document.getElementById('data_' + property);
                if (data) {
                    data.value = theme[property];
                }

                var className = property.replace('theme_', '').replace('_', '-');

                if ('body' === className) {
                    document.body.className = theme[property];
                } else {
                    var elements = document.getElementsByClassName(className);
                    for (var i = 0; i < elements.length; i++) {
                        var classNameNew = className + ' ' + theme[property]
                        if (elements[i].classList.contains('dropdown-toggle')) {
                            classNameNew = classNameNew + ' dropdown-toggle';
                        }
                        elements[i].className = classNameNew;
                    }
                }
            }
        }

        var themes = document.getElementsByClassName('theme');
        for (var i = 0; i < themes.length; i++) {
            themes[i].addEventListener('click', function(event) {
                event.preventDefault();
                changeTheme(event.target);
            });
        }
    </script>
{% endblock %}
